<template>
    <div>
        <div class="startBg">
            <div class="card">
                <div class="card-title">
                    {{ title }}
                </div>
                <!-- 试卷信息 -->
                <div class="paper">
                    <p>考试类型：<span>正在考试</span></p>
                    <p>考试时间：<span>2022年3月28日 9:00 ~ 2022年3月28日 11:00</span></p>
                    <p>答卷时间：<span>{{ durations }}分钟</span></p>
                    <p>考试方式：<span>线上</span></p>
                    <div class="msg">试卷信息</div>
                </div>
                <!-- 考生信息 -->
                <div class="people">
                    <p>姓名：<span>{{userInfo.name}}</span></p>
                    <p>证件号码：<span>3423445234634451231</span></p>
                    <p>部门：<span>信息中心</span></p>
                    <div class="msg">考生信息</div>
                </div>
                <!-- 开始答题 -->
                <div class="btn">
                    <el-button size="small ">返回上一步</el-button>
                    <el-button type="primary" size="small" @click="goAnswer()">开始答题</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            _id: "",
            title: "",
            durations: "",
            end: "",
            start: "",
            userInfo:{}
        }
    },
    methods: {
        goAnswer() {
            // this._id = this.$route.query._id;
            this.$router.push({
                path: "/testPaper",
                query: {
                    _id: this._id
                }
            });

        }
    },
    async created() {
        // console.log(this.$route.query);
        this._id = this.$route.query._id;
        const res = await this.$api.test.getTestsByIdApi({ _id: this._id });
        this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
        if (res.code) {
            //获取成功
            this.title = res.data.title;
            this.durations = res.data.durations;
            // this.title = res.data.end-time;
            // this.title = res.data.start-time;

        }
        console.log("试卷基本信息", res);
        console.log("unsr", this.userInfo);
        // console.log("试卷基本信息", res.data.end-time);
        

    },
}
</script>

<style lang="scss" scoped>
.startBg {
    width: 100%;
    height: 608px;
    background-image: url(../../assets/images/Tests/start-exam.png);
    position: relative;

    .card {
        width: 400px;
        height: 380px;
        background-color: #ffffff;
        position: absolute;
        top: 120px;
        left: 460px;

        .card-title {
            width: 245px;
            height: 23px;
            font-family: SourceHanSansCN-Regular;
            font-size: 15px;
            font-weight: bold;
            font-stretch: normal;
            line-height: 24px;
            letter-spacing: 0px;
            color: #333333;
            margin: auto;
            text-align: center;
            margin-top: 10px;
        }

        .paper {
            width: 370px;
            height: 130px;
            margin: auto;
            border-radius: 10px;
            margin-top: 20px;
            border: solid 1px #d6d6d6;
            position: relative;

            p {
                font-size: 12px;
                color: #666666;
                padding-left: 15px;

                span {
                    color: red;
                }
            }

            .msg {
                width: 55px;
                height: 18px;
                font-family: SourceHanSansCN-Regular;
                font-size: 13px;
                color: #333333;
                background-color: #ffffff;
                position: absolute;
                top: -10px;
                left: 15px;
            }
        }

        .people {
            width: 370px;
            height: 100px;
            margin: auto;
            border-radius: 10px;
            margin-top: 20px;
            border: solid 1px #d6d6d6;
            position: relative;

            p {
                font-size: 12px;
                color: #666666;
                padding-left: 15px;

                span {
                    color: red;
                }
            }

            .msg {
                width: 55px;
                height: 18px;
                font-family: SourceHanSansCN-Regular;
                font-size: 13px;
                color: #333333;
                background-color: #ffffff;
                position: absolute;
                top: -10px;
                left: 15px;
            }
        }

        .btn {
            width: 260px;
            height: 50px;
            margin-left: 105px;
            margin-top: 20px;
        }
    }

}
</style>